<template>
  <el-row :gutter="20" align="middle" type="flex">
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card shadow="hover">
          <el-link class="link-text" type="primary" :underline="false" @click="dateUtil">
            <img class="link-img" :src="require('../assets/main/dateUtilLogo.png')" alt="">
            <br/>
            <span>时间戳工具</span>
          </el-link>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card shadow="hover">
          <el-link class="link-text" type="primary" :underline="false" @click="jsonFormatUtil">
            <img class="link-img" :src="require('../assets/main/json.png')" alt="">
            <br/>
            <span>JSON格式化工具</span>
          </el-link>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card shadow="hover">
          <el-link class="link-text" type="primary" :underline="false" @click="removeWaterUtil">
            <img class="link-img" :src="require('../assets/main/抖音.png')" alt="">
            <br/>
            <span>抖音无水印视频解析</span>
          </el-link>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card shadow="hover">
          <el-link class="link-text" type="primary" :underline="false" @click="createQrCodeUtil">
            <img class="link-img" :src="require('../assets/main/二维码.png')" alt="">
            <br/>
            <span>二维码生成器</span>
          </el-link>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card shadow="hover">
          <el-link class="link-text" type="primary" :underline="false" @click="morseCodeUtil">
            <img class="link-img" :src="require('../assets/main/摩斯密码.png')" alt="">
            <br/>
            <span>摩斯密码解密加密</span>
          </el-link>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Home.vue",
  methods: {
    dateUtil() {
      this.$router.push('/dateUtil')
    },
    jsonFormatUtil(){
      this.$router.push('/jsonFormat')
    },
    removeWaterUtil(){
      this.$router.push('/removeWater')
    },
    createQrCodeUtil(){
      this.$router.push('/createQrCode')
    },
    morseCodeUtil(){
      this.$router.push('/morseCode')
    }
  }
}
</script>

<style scoped>
.link-text {
  font-size: 1em;
  text-align: center;
  display: flex;
}
.grid-content{
  margin-top: 10px;
  margin-bottom: 10px;
}
.link-img {
  width: 38px;
}
</style>
